<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网络技术提升</title>
</head>

<body>
    <script>
        //jsonp domain iframe 服务器中转 CORS(跨域资源共享) Access-control-Allow-Origin:'*';
        //CORS--->
        //1.json与jsonp分别代表什么？有什么区别
        //json是一种数据格式，jsonp是一种跨域的方式，两个完全不一样的概念

        //2.当你在地址栏输入www.baidu.com会发生什么？


        //3.window.onload与document.ready有什么区别
        // 一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
        // 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
        //window.onload是在dom文档树和所有文件都加载完才执行。也就是说document.ready要比window.onload先执行。
        
        
        /*4.常见的HTTP状态码你了解多少？描述一下以下的状态码
          HTTP状态码是用于表示网页服务器HTTP响应状态的3位数字代码。
          (1)200,请求成功一切正常，数据城成功返回。
          (2)301,永久性重定向，是指请求的文档在别的地方；文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。
          (3)302,临时重定向,该状态码表示请求的资源已被分配了新的URL,希望用户(本次)能使用新的URL访问。
          (4)303,该状态码表示由于请求对应的资源存在着另一个URL,应使用GET方法定向获取请求的资源。
          (5)403,Foribidden服务器端理解本次请求，但是拒绝执行任务，没有权限访问。
          (6)404,Not found请求的资源，网页无法找到，不存在。URL错误。
          (7)503,服务器端无法响应,服务器由于在维护或已经超载而无法响应。


          5.什么情况下会遇到跨域，描述一下前端常见的处理跨域的几种方式。
          浏览器最核心,最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式,当浏览器执行一个脚本时会检查是否同
          源,只有同源的脚本才会执行，如果不同源即为跨域。
          (1)--------------------1.JSONP原理-----------------------
          原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script, script标签的src属性就是后端api接口的地址,
          并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去。
          (2)--------------------2.CORS(跨域资源共享)服务器端-----------------------
          CORS: (跨城资源共享)是一种允许当前域的资源被其他域的脚本请求访问的机制。当使用XMLHttpRequest 发送请求时，浏览器如果发现违反了同源策略就会
          自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-origin.值就是发起请求的源地
          址,浏览器得到响应会进行判断 Access-Control-Allow-origin的值是否和当前的地址相同,只有匹配成功后才进行响应处理 
          现在浏览器中和移动端都支持CORS，IE下需要8+。
          (3)--------------------3.服务器跨域，服务器中转代理--------------------
          前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端。


          6.Web前端应该从哪些方面来优化网站性能？
          (1)减少页面体积，提升网络加载
          静态资源压缩合并，(Js/css代码压缩合并，雪碧图)《CSS雪碧 即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。只需请求一次》
          静态资源缓存
          使用CDN加载资源更快(CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。)
          (2)优化页面渲染
          css放在前面,js放后面
          懒加载
          减少dom操作
          

          7.浏览器端储存有哪些，并描述他们的区别。
          cookie localStorage seesionStorage
          (1)生命周期:cookie可以设置生命周期，localStorage除非清除，否则永久有效，sessionStorage关闭页面窗口或关闭浏览器清除，刷新页面不会清除。
          (2)大小:cookie 4KB左右  localStorage 5MB左右 seessionStorage 5MB左右
          (3)与服务器之间的通信:cookie每次都会携带在HTTP头部中如果使用cookie保存过多数据会带来性能问题，localStorage和seesionStorage仅在浏览器中保存，不参与和服务器通信
          (4)易用性:cookie需要程序员自己封装，原生的cookie接口不友好，localStorag与seesionStorage源生接口可以接受，可以再次封装对Object和Array有更好的支持。




          8.get和post请求，区别？
          (1)GET参数通过URL传递，POST放在Request body中。
          (2)GET请求会被浏览器主动cache，而POST不会，除非手动设置。
          (3)GET请求只能进行url编码，而POST支持多种编码方式。
          (4)GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
          (5)GET请求在URL中传送的参数是有长度限制的，而POST没有。
          (6)对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
          (7)GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
          (8)GET产生的URL地址可以被Bookmark，而POST不可以。、
          (9)GET产生一个TCP数据包: POST产生两个TCP数据包。(对于GET方式的请求,浏览器会把 http header和data一并发送出去,服务器响应200(返回数据);而对于POST,
          浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok (返回数据））
       
       
          9.一个页面从输入URL到页面加载完的过程中都发生了什么事情？
          加载过程:
          (1)浏览器根据DNS服务器解析得到域名的IP地址(解析DNS，建立IP连接)
          (2)建立TCP连接(建立TCP链接,就是通常说的三次握手,首先是客户端向服务器发送请求是否可以建立链接,服务器返回同意后,客户端回馈服务器的响应,即完成3次通话。)
          (3)向这个IP的服务器发送HTTP请求(HTTP请求包括请求行:方法+地址+http版本，请求头Request headers，请求体Request body)
          (4)服务器收到,处理并返回HTTP请求(收到服务器端响应包括响应行：http版本+状态码+状态描述,响应头，响应体)
          (5)浏览器得到返回内容(浏览器解析数据解析DOM Tree-->解析CSS Tree-->DOM+CSS Tree布局绘制到屏幕,解析JS)
          (6)关闭TCP连接
          渲染过程:
          (1)根据HTML结构生成DOM树
          (2)根据CSS生成CSSOM
          (3)将DOM和CSSOM整合形成RenderTree
          (4)根据RenderTree开始渲染和展示
          (5)遇到<script>时，会执行并阻塞渲染

          10.实现数组去重（搜索数组去重的12种方法）



          11.实现一个深度拷贝
            //深度克隆  因为只要改变了原数组的值 不管是是否过滤 都会改变 因为过滤器拿到的是地址的索引 并不会拿到值
            var obj1 = {
                name: "老王",
                age: 20,
                gf: {

                }
            }
            var obj2 = {
                name: "老李",
                age: 21,
                gf: {
                    gf1: {
                        name: "小红",
                        age: 20
                    },
                    gf2: {
                        name: "小芳",
                        age: 20
                    }
                }
            }
            //把obj2里面的值克隆到obj1里面去
            function deepClone(target, option) {
                var copy, src;
                if (option) {
                    for (var prop in option) {
                        copy = option[prop];
                        src = target[prop];
                        //引用值的时候
                        if (copy && typeof copy == 'object') {
                            //[] || {}
                            if (Object.prototype.toString.call(copy) == '[object Array]') {
                                src = src ? src : [];
                            } else {
                                src = src ? src : {};
                            }
                            target[prop] = deepClone(src,copy);
                        } else {
                            target[prop] = copy;
                        }
                    }
                }
                return target;
            }
            //深度克隆成功把obj2给克隆到obj1
            deepClone(obj1, obj2);
            


            12.TCP的三次握手与四次挥手
            三次握手:
            A对B说:我的序号是x,我要向你请求连接; (第一次握手,发送SYN包,然后进入SYN-SEND状态）
            B听到之后对A说:我的序号是y,期待你下一句序号是x+1的话(意思就是收到了序号为x的话,即ack=x+1) ,同意建立连接。(第二次握手,发送ACK-SYN包,然后进入SYN-RCVD状态)
            A听到B说同意建立连接之后，对A说:与确认你同意与我连接(ack=y+1,ACK=1,seq=x+1)。
            (第三次握手,A已进入ESTABLISHED（确定）状态)
            B听到A的确认之后，也进入ESTABLISHED（确定）状态。

            四次挥手就是:
            1.A与B交谈结束之后, A要结束此次会话,对B说:我要关闭连接了(seq=u,FIN=1) 。 第一次挥手, A进入FIN-WAIT-1)
            2.B收到A的消息后说:确认,你要关闭连接了。(seq=v, ack=u+1, ACK=1) (第二次挥手, B 进入CLOSE-WAIT).
            3.A收到B的确认后,等了一段时间,因为B可能还有话要对他说。(此时A进入FIN-WAIT-2)
            4.B说完了他要说的话(只是可能还有话说)之后, 对A说 , 我要关闭连接了。(seq=w.ack=u+1, FIN=1, ACK=1 ) (第三次挥手)
            5.A收到B要结束连接的消息后说:已收到你要关闭连接的消息。(seq=u+ 1. ack=w+1. ACK=1) (第四次挥手,然后A进入CLOSED) 
            6.B收到A的确认后,也进入CLOSED
            


            13.TCP和UDP的区别？
            TPC传输控制协议(电话形式必须要双方都接才能通信)
            UDP用户数据报协议(微信形式你发了不管他收没收到)
            1.TCP面向连接(如打电话要先拨号建立连接）UDP是无连接的,即发送数据之前不需要建立连接
            2.TCP提供可靠的服务。也就是说，通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达：UDP尽最大努力交付，即不保证可靠交付
            3.TCP面向字节流,实际上是TCP把数据看成一连串无结构的字节流UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）
            4.每一条TCP连接只能是点到点的:UDP支持一对一,一对多,多对一和多对多的交互通信
            5.TCP首部开销20字节UDP的首部开销小,只有8个宇节 
            6.TCP的逻辑通信信道是全成工的可靠信道，(IDP则是不可靠信道



            14.HTTP是什么？
            HTTP是hypertext transler prolocol (超文本传输协议)的简写, 它是TCP/IP协试的一个应用层协议,用于定义WEB浏览器与EB服务器之间交换数据的过程。客户端连上 web服务器后,若想获得web服务器中的某个web资源,需遵守一定的通讯格式, HTTP协议用于定义客户端与web服务器通讯的格式。



            15.http与https的区别？
            HTTP是超文本传输协议，信息是明文传输的
            HTTPS则是具有安全性的SSL加密传输协议
            为了数据传输的安全, HTTPS在HTTP的基础 加入了SSL协议, SSL依靠证书来验证服务器并为浏览器和服务器之间的通信加密。
            HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全。
            
            
            16.对于模块化的理解怎么在书写代码中提现。
            所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数。高内聚,低稱合。
            函数开发、对象封装、立即执行函数封装、输入全局变量。


            17.重排(回流)和重绘是什么？什么情况下回触发重排和重绘？
            浏览器会把HTML解析成DOM,把CSS解析成CSSOM, DOM和CSSOM合并就产生了Render Tree.有了RenderTree,我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。
            回流:当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新道染部分或全部文档的过程称为回流。
            页面首次渲染
            浏览器窗口大小发生改变
            元素尺寸或位置发生改变
            元素内容变化(文字数量或图片大小等等)元
            素宇体大小变化
            添加或者删除可见的DOM元素
            当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color,background-color,visibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。避免频繁的样式操作,最好一次性重写style,或者一次性更改class,避免频繁操作dom,对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。


            */

            // function deepClone(target, option) {
            //     var copy, src;
            //     if (option) {
            //         for (var prop in option) {
            //             copy = option[prop];
            //             src = target[prop];
            //             //引用值的时候
            //             if (copy && typeof copy == 'object') {
            //                 //[] || {}
            //                 if (Object.prototype.toString.call(copy) == '[object Array]') {
            //                     src = src ? src : [];
            //                 } else {
            //                     src = src ? src : {};
            //                 }
            //                 target[prop] = deepClone(src,copy);
            //             } else {
            //                 target[prop] = copy;
            //             }
            //         }
            //     }
            //     return target;
            // }


    </script>
</body>

</html>